<template>
	<view class="">
		<view class="amend">
			<view class="content">
				<view class="box">
					<input type="text" value="" placeholder="请输入子账号昵称" placeholder-style="color:#cccccc;fontSize:28upx" v-model="nickname" />
				</view>

				<view class="box">
					<input type="password" value="" placeholder="请输入子账号密码" placeholder-style="color:#cccccc;fontSize:28upx" v-model="password" />
				</view>

				<view class="box code">
					<input type="text" value="" placeholder="请输入验证码" placeholder-style="color:#cccccc;fontSize:28upx" v-model="code" />
					<view class="" v-if="!countDown" @click="getCode">{{ codeText }}</view>
					<view class="" v-if="countDown">
						<u-count-down
							:timestamp="timestamp"
							:show-days="false"
							:show-hours="false"
							:show-minutes="false"
							@change="changes"
							@end="countDownEnd"
							bg-color="#f81149;"
							color="#fff"
						></u-count-down>
						s
					</view>
				</view>
			</view>
			
			<view class="btn" @click="amendBtn" v-if="status == 1">添加</view>
			<view class="btn" v-else>添加</view>
		</view>
	</view>
</template>

<script>
import service from '@/store/service.js';
export default {
	data() {
		return {
			nickname:'',
			password:'',
			timestamp: 59,
			countDown: false,
			codeText: '验证码',
			code: '', //验证码
			status:1,
			mobile:'',
		};
	},
	onLoad(option) {
		var self = this;
		self.$http.post(service.api.user.info).then(function(res) {
			var list = res.data;
			self.mobile = list.mobile;
		});
		
	},
	methods: {
		amendBtn(){
			let that = this;
			if (!that.nickname) {
				that.$api.msg('请输入子账号昵称');
				return;
			}
			
			if (!that.password) {
				that.$api.msg('请输入子账号密码');
				return;
			}
			
			if (!that.code) {
				that.$api.msg('请输入验证码');
				return;
			}
			
			that.status = 0;
			that.$http.post(service.api.user.insert,  {
				nickname: that.nickname,
				password: that.password,
				code:that.code
			}).then(res => {
				that.$api.msg(res.info);
				if (res.code === 1) {
					setTimeout(function(){
						uni.navigateBack({
							delta:1
						})
					},1500)
				} else {
					that.status = 1;
				}
			});
		},
		getCode() {
			let that = this;
			that.$http.get(service.api.login.code, {
				mobile: that.mobile,
				temp:"sms_bind"
			}).then(function(res) {
				that.$api.msg(res.info);
				if (res.code === 1) {
					that.countDown = !that.countDown;
					that.codeText = '重新获取';
				}
			});
		},
		countDownEnd() {
			this.countDown = !this.countDown;
			
		},
		//获取验证码倒计时进行中
		changes() {
			
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	height: 100%;
	overflow: hidden;
	background-color: #fff;
}

.amend {
	.content {
		background-color: #ffffff;
		margin-top: 30upx;
		padding: 0 30upx;

		.box {
			padding: 40upx 0;
			border-bottom: 1upx solid #f4f4f4;
			color: #333333;
		}

		.code {
			display: flex;
			align-items: center;
			justify-content: space-between;

			> view {
				width: 124upx;
				height: 52upx;
				line-height: 52upx;
				text-align: center;
				border-radius: 26upx;
				background-color: #F8124A;
				font-size: 28upx;
				color: #ffffff;
			}
		}
	}

	.btn {
		width: 630upx;
		height: 100upx;
		line-height: 100upx;
		text-align: center;
		border-radius: 50upx;
		color: #ffffff;
		background-color: #F8124A;
		font-size: 36upx;
		margin: 60upx auto 0 auto;
	}
}
</style>
